<template>
  <div class="app-container">
    <div class="tab-bar">
      <div
        class="tab-item"
        :class="current === it.id ? 'tab-item-ac' : ''"
        v-for="(it, idx) in tabList"
        :key="idx"
        @click="handleTabClick(it.id)"
      >
        {{ it.name }}
      </div>
    </div>

    <div class="form-main" ref="formMain">
      <div ref="basicInfo" v-if="!detailInfo.question">
        <el-card class="box-card">
          <div slot="header" class="clearfix">基础信息</div>
          <div v-if="Object.keys(detailInfo).length > 0">
            <basic-info :detailInfo="detailInfo"></basic-info>
          </div>
        </el-card>
      </div>

      <div
        ref="taxInformation"
        v-if="detailInfo.matchType === 1 && !detailInfo.question"
      >
        <el-card class="box-card">
          <div slot="header" class="clearfix">纳税信息</div>
          <div>
            <tax-information :detailInfo="detailInfo"></tax-information>
          </div>
        </el-card>
      </div>

      <div
        ref="invoiceInformation"
        v-if="detailInfo.matchType === 1 && !detailInfo.question"
      >
        <el-card class="box-card">
          <div slot="header" class="clearfix">开票信息</div>
          <div>
            <invoice-information :detailInfo="detailInfo"></invoice-information>
          </div>
        </el-card>
      </div>

      <div ref="businessJudicialInformation">
        <el-card class="box-card">
          <div slot="header" class="clearfix">工商司法信息</div>
          <div>
            <business-judicial-information
              :detailInfo="detailInfo"
            ></business-judicial-information>
          </div>
        </el-card>
      </div>

      <div ref="creditInformation">
        <el-card class="box-card">
          <div slot="header" class="clearfix">征信信息</div>
          <div>
            <credit-information :detailInfo="detailInfo"></credit-information>
          </div>
        </el-card>
      </div>

      <div ref="developPlan">
        <el-card class="box-card">
          <div slot="header" class="clearfix">出产品可贷额度</div>
          <div>
            <detailcomponeents :searchType="0" ref="detailcomponeents" :detailInfo="detailInfo"></detailcomponeents>
          </div>
        </el-card>
      </div>
    </div>
    <!--    <el-backtop target=".form-main" :bottom="100" :visibility-height="1000">-->
    <!--      <div-->
    <!--        style="-->
    <!--           {-->
    <!--            height: 100%;-->
    <!--            width: 100%;-->
    <!--            background-color: #ccc;-->
    <!--            box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);-->
    <!--            text-align: center;-->
    <!--            line-height: 40px;-->
    <!--            border-radius: 20px;-->
    <!--            color: #1989fa;-->
    <!--          }-->
    <!--        "-->
    <!--      >-->
    <!--        <i style="color: #fff;" class="el-icon-upload2"></i>-->
    <!--      </div>-->
    <!--    </el-backtop>-->
    <div
      style="
        background-color: #fff;
        width: 100%;
        height: 60px;
        padding-bottom: 20px;
      "
    >
      <div
        style="
          margin: 20px;
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translate(-50%, 0);
        "
      >
        <el-button v-debounce type="primary" @click="onSubmit()"
          >提交</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { tabList } from "../options";
import basicInfo from "./components/basicInfo.vue";
import taxInformation from "./components/taxInformation.vue";
import invoiceInformation from "./components/invoiceInformation.vue";
import businessJudicialInformation from "./components/businessJudicialInformation.vue";
import creditInformation from "./components/creditInformation.vue";
import detailcomponeents from "./components/detailcomponeents.vue";
import { saveQuota } from "@/api/customer";
// import { saveProjectList } from "@/api/product";
export default {
  components: {
    basicInfo,
    taxInformation,
    invoiceInformation,
    businessJudicialInformation,
    creditInformation,
    detailcomponeents
  },

  data() {
    return {
      tabList,
      current: 0,
      detailInfo: {},
      matchTypeStatus: true
    };
  },
  created() {
    if (this.$route.query.type) {
      this.current = 2;
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs.developPlan.scrollIntoView({ behavior: "smooth" });
        }, 100);
      });
    }

    if (this.$route.query.data) {
      this.detailInfo = JSON.parse(this.$route.query.data);
      if (this.detailInfo.question) {
        this.current = 2;
        this.tabList = [
          { name: "工商司法信息", id: 0 },
          { name: "征信信息", id: 1 },
          { name: "出额度", id: 2 }
        ];
      }
      if (this.detailInfo.matchType === 2) {
        let newArr = [];
        this.tabList.forEach(item => {
          if (item.name !== "纳税信息" && item.name !== "开票信息") {
            newArr.push(item);
          }
        });
        this.tabList = newArr;
      }
    }
  },
  methods: {
    onSubmit() {
      let recommendedProducts = this.$refs.detailcomponeents.recommendedProducts;
      if (recommendedProducts.length > 0) {
        let list = recommendedProducts.map(item => {
          return {
            id: item.id,
            quota: item.quota
          };
        });

        let newData = JSON.parse(this.$route.query.data);
        let params = {
          quotaParamList: list,
          id: newData.id,
          type: newData.matchType,
          matchStep: newData.matchStep
        };
        saveQuota(params).then(res => {
          if (res.code === 200) {
            this.$message({
              message: "保存成功",
              type: "success"
            });
            setTimeout(() => {
              this.$router.go(-1);
            }, 1000);
          }
        });
      }
    },
    handleTabClick(id) {
      this.current = id;
      let mapObj = {};

      if (this.detailInfo.question) {
        mapObj = {
          0: "businessJudicialInformation",
          1: "creditInformation",
          2: "developPlan"
        };
      } else {
        mapObj = {
          0: "basicInfo",
          1: "taxInformation",
          2: "invoiceInformation",
          3: "businessJudicialInformation",
          4: "creditInformation",
          5: "developPlan"
        };
      }

      this.$refs[mapObj[id]].scrollIntoView({ behavior: "smooth" });
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 50px);
  background-color: #f5f5f5;
  position: relative;
}

.tab-bar {
  position: absolute;
  left: 10px;
  top: 0px;
  width: calc(100% - 20px);
  background-color: #fff;
  height: 60px;
  line-height: 60px;
  display: flex;

  .tab-item {
    height: 100%;
    width: 100px;
    text-align: center;
    font-size: 14px;
  }

  .tab-item-ac {
    background-color: rgba(64, 158, 255, 0.1);
    color: #409eff;
    border-top: 2px solid #409eff;
  }
}

.form-main {
  margin-top: 40px;
  height: calc(100% - 80px);
  /* 将高度设置为父级容器高度减去上方固定元素的高度 */
  overflow-y: auto;

  .form-box {
    text-align: center;
    margin-top: 40px;
  }

  .clearfix {
    font-weight: 500;
  }

  .uploadPic {
    width: 90px;
    height: 90px;

    background: #eeeeee;
    border-radius: 8px;
    position: relative;

    > i {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .inputSty {
    display: flex;
  }

  .box-card {
    margin-bottom: 30px;
  }
}
</style>
